.title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 10px 10px;
}

.resources {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;

  .resourceSkeleton {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    background-color: var(--color-gray-50);
    border-radius: 8px;

    :global(.ant-skeleton):first-child {
      width: 100%;
      aspect-ratio: 1 / 1;

      :global(.ant-skeleton-image) {
        width: 100%;
        height: 100%;
      }
    }
  }

  .resource {
    background-color: var(--color-gray-50);
    overflow-wrap: anywhere;
    box-shadow: 2px 2px 10px 1px #0005;
    border-radius: 8px;

    > img {
      background: var(--color-gray-200);
      aspect-ratio: 1 / 1;
      border-radius: 8px 8px 0 0;
    }

    .text {
      flex: 1;
      text-align: center;
      max-height: 54px;
      padding: 4px;
      font-weight: 600;
      width: 100%;
      overflow: auto;
    }
  }
}
